<template>
  <div class="center">
    <n-card :bordered="false">
      <BasicForm
        @register="register"
        @submit="handleSubmit"
        @reset="handleReset"
        :submitButtonText="'查询'"
        :show-feedback="false"
        :resetButtonText="'重置'"
      >
        <template #statusSlot="{ model, field }">
          <n-input v-model:value="model[field]" />
        </template>
      </BasicForm>
    </n-card>
    <n-card :bordered="false" class="proCard">
      <BasicTable
        :columns="columns"
        :request="loadDataTable"
        :row-key="(row) => row.id"
        ref="actionRef"
        :actionColumn="actionColumn"
        @update:checked-row-keys="onCheckedRow"
        :scroll-x="1090"
      >
        <template #tableTitle>
          <n-space>
            <n-button size="small"> 更新信息 </n-button>
          </n-space>
        </template>
      </BasicTable>
    </n-card>
    <Model
      :showModal="showModal"
      :FormData="FormData"
      :formValue="formValue"
      :title="title"
      @ModelClick="ModelClick"
      @close="close"
    ></Model>
    <ModelBox
      :ModelBox="ModelBox"
      :center="center"
      :title="title"
      @ModelClick="ModelClick"
      @close="close"
    ></ModelBox>
  </div>
</template>

<script lang="ts">
import { h, defineComponent, reactive, ref, toRaw } from 'vue';
import { useMessage } from 'naive-ui';
import { BasicTable, TableAction } from '@/components/Table';
import { BasicForm, useForm } from '@/components/Form/index';
import { getTableList } from '@/api/table/list';
import { PlusOutlined } from '@vicons/antd';
import { useRouter } from 'vue-router';
import { Model } from '@/components/Model';
import { ModelBox } from '@/components/ModelBox';
export default defineComponent({
  components: {
    BasicTable,
    BasicForm,
    PlusOutlined,
    Model,
    ModelBox,
  },
  setup() {
    const rules = {
      name: { required: true, trigger: ['blur', 'input'], message: '请输入名称' },
      address: { required: true, trigger: ['blur', 'input'], message: '请输入地址' },
      date: { type: 'number', required: true, trigger: ['blur', 'change'], message: '请选择日期' },
    };
    const columns = [
      {
        title: '序号',
        key: 'key',
      },
      {
        title: '地区',
        key: 'address',
      },
      {
        title: '部门名称',
        key: 'name',
      },
      {
        title: '区域id',
        key: 'id'
      }
    ];
    const router = useRouter();
    const formRef: any = ref(null);
    const center = ref(null);
    const message = useMessage();
    const actionRef = ref();
    const title = ref(null);
    const showModal = ref(false);
    const ModelBox = ref(false);
    const formBtnLoading = ref(false);
    const formValue = ref({});
    const FormData = ref([
      {
        label: '人员名称',
        type: 'n-input',
        enName: 'qiyemingcheng',
        clearable: true,
        size: 'small',
        placeholder: '请输入人员名称',
      },
      {
        label: '所属部门',
        type: 'n-select',
        enName: 'xiehui',
        clearable: true,
        size: 'small',
        placeholder: '请选择所属部门',
        options: [
          { label: '所属部门1', value: 1 },
          { label: '所属部门2', value: 2 },
        ],
      },

      {
        label: '更多字段',
        type: 'n-input',
        InputType: 'textarea',
        enName: 'ziduan',
        clearable: true,
        size: 'small',
        placeholder: '请输入字段',
      },
    ]);
    // const formParams = ref({
    //   name: '',
    //   addresss: '这是地址',
    //   date: null,
    // });

    const params = ref({
      pageSize: 10,
      name: 'xiaoMa',
    });

    const actionColumn = reactive({
      width: 220,
      title: '操作',
      key: 'action',
      fixed: 'right',
      render(record) {
        return h(TableAction as any, {
          style: 'button',
          actions: [
            {
              label: '查看',
              type: 'primary',
              text: true,
              onClick: see.bind(null, record),
            },
          ],
        });
      },
    });
    const schemas = [
      {
        field: 'hangye',
        component: 'NSelect',
        label: '行业领域',
        size: 'small',
        componentProps: {
          placeholder: '请选择行业领域',
          options: [
            {
              label: '行业1',
              value: 1,
            },
            {
              label: '行业2',
              value: 2,
            },
          ],
          onInput: (e: any) => {
            console.log(e);
          },
        },
      },
      {
        field: 'name',
        component: 'NSelect',
        label: '企业选择',
        size: 'small',
        componentProps: {
          placeholder: '请选择企业',
          options: [
            {
              label: '企业1',
              value: 1,
            },
            {
              label: '企业2',
              value: 2,
            },
          ],
          onInput: (e: any) => {
            console.log(e);
          },
        },
      },
    ];
    const [register, {}] = useForm({
      gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
      labelWidth: 80,
      schemas,
    });
    const loadDataTable = async (res) => {
      return await getTableList({ ...res, ...params.value });
    };

    const onCheckedRow = (rowKeys) => {
      console.log(rowKeys);
    };

    const reloadTable = () => {
      console.log('123');
    };
    const Deactivate = (record: Recordable) => {
      ModelBox.value = true;
      title.value = '停用&启用';
      center.value = '是否确定要停用&启用';
    };

    const handleEdit = (record: Recordable) => {
      router.push({ name: 'DepartmentUserDetails', params: { id: record.id } });
    };

    const handleDelete = (record: Recordable) => {
      ModelBox.value = true;
      title.value = '删除';
      center.value = '是否确定要删除?';
    };
    const see = (record: Recordable) => {
      router.push({ name: 'DepartmentUserDetails', params: { id: record.id } });
    };

    //查询
    const handleSubmit = (row) => {
    };

    //模态框确定
    const ModelClick = async (e) => {
      showModal.value = e;
      ModelBox.value = e;
    };
    //模态框关闭
    const close = (e) => {
      showModal.value = e;
      ModelBox.value = e;
    };
    return {
      rules,
      schemas,
      router,
      formRef,
      message,
      actionRef,
      showModal,
      ModelBox,
      formBtnLoading,
      // formParams,
      params,
      actionColumn,
      register,
      loadDataTable,
      onCheckedRow,
      reloadTable,
      Deactivate,
      handleEdit,
      handleDelete,
      see,
      columns,
      handleSubmit,
      ModelClick,
      close,
      title,
      FormData,
      formValue,
      center,
    };
  },
});
</script>

<style lang="less" scoped>
.center :deep .n-card {
  margin: 0 0 20px 0;
}
</style>
